<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu"></i>考试重点分类</el-breadcrumb-item>
<!--                 <el-breadcrumb-item>基础表格</el-breadcrumb-item> -->
            </el-breadcrumb>
        </div>
        <div class="handle-box">
            <el-button type="success" icon="plus" class="handle-del mr10" @click="create">添加节点</el-button>
            <el-button type="warning" icon="setting" class="handle-del mr10" @click="regenerate">重置</el-button>
        </div>
        <el-table :data="tableData" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
            <el-table-column label="id" prop="id">
            </el-table-column>
<!--             <el-table-column type="selection" width="55"></el-table-column> -->
            <el-table-column prop="title" label="标题" width="340">
                <template scope="scope">
                    {{scope.row.prefix}} {{scope.row.title}}
                </template>
            </el-table-column>
            <el-table-column prop="code" label="编码">
                <template scope="scope">
                    <el-tag type="primary" v-show="scope.row.code != ''">{{scope.row.code}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="左右值">
                <template scope="scope">
                    <el-tag type="gray">{{scope.row.lft}},{{scope.row.rgt}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="排序">
                <template scope="scope">
                    {{scope.row.ordering}}
                </template>
            </el-table-column>
            <el-table-column label="路径">
                <template scope="scope">
                    {{scope.row.path}}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
                <template scope="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" v-show="scope.row.pid > 0" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                   <!--  <el-button v-if="scope.row.level == 3" type="success" icon="setting" size="small" @click="setLibType(scope.row)">题型设置</el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                    @current-change ="handleCurrentChange"
                    layout="prev, pager, next"
                    :current-page.sync="pagination.current"
                    :page-size="pagination.size"
                    :total="pagination.total">
            </el-pagination>
        </div>
        <div class="dialog">
            <el-dialog title="基本信息" :visible.sync="isadding" v-loading.body="saveloading">
              <el-form :model="category">
                <el-form-item label="标题" label-width="80px">
                  <el-input v-model="category.title" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="编码" label-width="80px">
                  <el-input v-model="category.code"></el-input>
                </el-form-item>
                <el-form-item label="父节点" label-width="80px" v-show="category.pid > 0">
                  <el-select v-model="category.pid" placeholder="请选择" size="200px">
                    <el-option
                      v-for="item in tableData"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id">
                        <span>{{item.prefix}}{{item.title}}</span>
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="题型" label-width="80px" v-show="category.level == 3">
                  <el-select v-model="category.lib_type" placeholder="请选择" size="200px">
                    <el-option
                      v-for="item in libtype"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                        <span>{{item.label}}</span>
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="排序" label-width="80px">
                  <el-input v-model="category.ordering"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="isadding = false">取 消</el-button>
                <el-button type="primary" @click="save()" v-show="category.id < 1">确 定</el-button>
                <el-button type="success" @click="update()" v-show="category.id > 0">更 新</el-button>
              </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import http from "../../lib/http"
    import tree from "../../lib/tree"
    export default {
        data : function() {
            return {
                //url: './static/vuetable.json',
                isadding : false,
                tableData: [],
                cur_page: 1,
                multipleSelection: [],
                select_cate: '',
                select_word: '',
                del_list: [],
                is_search: false,
                saveloading : false,
                dataTotal : 0,
                libtype : [{
                    label : '普通题型',
                    value : '0'
                },{
                    label : '材料题型',
                    value : '1'
                }],
                category : {
                    id : '',
                    title : '',
                    code : '',
                    pid : "1",
                    level : "0",
                    ordering : 0,
                    lib_type : '0'
                },
                pagination : {
                    current : 1,
                    total : 0,
                    size : 1000000
                }
            }
        },
        created : function(){
            var self = this
            http.alive(this,function(){
                self.getData();
            })
        },
        computed: {
            data : function(){
                const self = this;
                // return self.tableData.filter(function(d){
                //     let is_del = false;
                //     for (let i = 0; i < self.del_list.length; i++) {
                //         if(d.name === self.del_list[i].name){
                //             is_del = true;
                //             break;
                //         }
                //     }
                //     if(!is_del){
                //         if(d.address.indexOf(self.select_cate) > -1 && 
                //             (d.name.indexOf(self.select_word) > -1 ||
                //             d.address.indexOf(self.select_word) > -1)
                //         ){
                //             return d;
                //         }
                //     }
                // })
            }
        },
        methods: {
            handleCurrentChange : function(val){
                this.cur_page = val;
                this.getData();
            },
            getData : function(){
                let self = this;
                http.get(self,"point_categories").then((res) => {
                    var response = res.data
                    if (response.code == "ok") {
                        self.tableData = tree.make(response.data,"pid",0)
                        self.pagination.total = response.total * 1
                    }
                })
                // if(process.env.NODE_ENV === 'development'){
                //     self.url = '/ms/table/list';
                // };
                // self.$axios.post(self.url, {page:self.cur_page}).then((res) => {
                //     self.tableData = res.data.list;
                // })
            },
            // search(){
            //     this.is_search = true;
            // },
            create : function(){
                this.isadding = true
                this.category = {
                    id : '',
                    title : '',
                    code : '',
                    pid : "1",
                    level : "0",
                    ordering : 0
                }
            },
            regenerate : function(){
                var self = this
                http.post(this,"test_point_category/manage/regenerate").then(function(res){
                    var data = res.data
                    if (data.code == "ok") {
                        self.getData()
                        self.$notify.success({
                            title : "成功",
                            message : "重置成功"
                        })
                    }
                    else{
                        self.$notify.error({
                            title : "错误",
                            message : "重置失败"
                        })
                    }
                })
            },
            save : function(){
                var self = this
                this.saveloading = true
                http.post(this,"point_category",this.category).then((res)=>{
                    self.saveloading = false
                    self.isadding = false
                    var data = res.data
                    if (data.code == "ok") {
                        self.getData()
                    }
                    else{
                        self.$notify.error({
                            title : "错误",
                            message : data.msg
                        })
                    }
                })
            },
            update : function(){
                var self = this
                this.saveloading = true
                http.put(this,"point_category",this.category).then((res) => {
                    self.isadding = false
                    self.saveloading = false
                    var data = res.data
                    if (data.code == "ok") {
                        self.getData()
                        self.$notify.success({
                            title : "成功",
                            message : "更新成功"
                        })
                    }
                    else{
                        self.$notify.error({
                            title : "错误",
                            message : data.msg
                        })
                    }
                })
            },

            handleEdit : function(index, category) {
                this.isadding = true
                this.category.id = category.id
                this.category.pid = category.pid
                this.category.title = category.title
                this.category.code = category.code
                this.category.ordering = category.ordering
                this.category.level = category.level
                //this.$message('编辑第'+(index+1)+'行');
            },
            handleDelete : function(index, row) {
                //this.$message.error('删除第'+(index+1)+'行');
                var self = this
                this.$confirm('此操作将删除节点以及子节点,是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                    if (row.pid == 0) {
                        self.$notify.error({
                          title: '错误',
                          message: '根节点不允许删除'
                        });
                    }
                    else{
                        http.delete(this,"point_category/"+row.id).then(function(res){
                            self.getData()
                        })
                    }
                }).catch(() => {
     
                });
            },

            handleSelectionChange :function(val) {
                this.multipleSelection = val;
            }
        }
    }
</script>

<style scoped>
.handle-box{
    margin-bottom: 20px;
}
.handle-select{
    width: 120px;
}
.handle-input{
    width: 300px;
    display: inline-block;
}
</style>